<template>
    <z-paging>
        <view class="heqader_box" style="background-image: url('https://morgan.dingxians.cn/static/flow/0.png');">
            <hedsty mrbot="175"></hedsty>
            <view class="tabs_box">
                <view class="dange_tabs_box" v-for="(item, index) in tabs" :key="index"
                    :class="tabsid == item.id ? 'dange_tabs_box1' : ''" @click="tabBtn(item)">
                    {{ item.text }}
                </view>
            </view>
        </view>
        <view class="bottom_box">
            <template v-if="phlist.length>0">
                <view class="dange_box" v-for="(item, index) in phlist" :key="index" >
                <view class="paiming_box" :class="'paiming_box_' + Number(index + 1)">NO.{{ index + 1 }}</view>

                <view class="avatar_sbox">
                    <view class="avatartxk_box" v-if="Number(index + 1) <= 3"
                        :style="{ backgroundImage: 'url(' + 'https://morgan.dingxians.cn/static/flow/0' + Number(index + 1) + '.png)' }">
                    </view>
                    <image :src="item.avatar" mode="scaleToFill" />
                </view>
                <view class="nicheng_box">
                    <view class="one_top_box">{{ item.nickname }}</view>
                    <view class="two_bot_box">ID:{{item.user_id}}</view>
                </view>
                <view class="liushuiz_box">{{ item.total_pay }}</view>
            </view>
            </template>
            <template v-else>
                <empty></empty>
            </template>
        </view>

    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            tabs: [
                {
                    id: 1,
                    text: '日总流水'
                },
                {
                    id: 2,
                    text: '周总流水'
                },
                {
                    id: 3,
                    text: '当日无限'
                },
                {
                    id: 4,
                    text: '当日擂台'
                },
            ],
            tabsid: 1,
            phlist:[]
        }
    },
    onLoad() {

    },
    onShow() {
this.streamRanks()
    },
    methods: {
        tabBtn(item) {
            this.tabsid = item.id
            this.streamRanks()
        },
        streamRanks(){
            let data = {
                type: this.tabsid
            }
            this.$Request.get(this.$api.user.streamRanks, data).then(res => {
                if (res.code == 200) {
                    this.phlist = res.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 750rpx;
    background-size: 100% 100%;

    .tabs_box {
        width: 700rpx;
        margin: auto;
        height: 134rpx;
        display: flex;
        justify-content: space-between;
        background-color: rgba(57, 3, 3, 1);
        border-radius: 20rpx;

        .dange_tabs_box {
            width: 25%;
            height: 134rpx;
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            line-height: 60rpx;

            &.dange_tabs_box1 {
                margin-top: -18rpx;
                transition: .5s;
                background: linear-gradient(90deg, #FF4242, #EF2424);
                border-radius: 20rpx 20rpx 0 0;
            }

        }
    }


}

.bottom_box {
    width: 700rpx;
    height: 1200rpx;
    left: 0;
    right: 0;
    margin: auto;
    background: #0D0100;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    padding: 20rpx 0;
    overflow: hidden;
    overflow-y: auto;

    .dange_box {
        width: 640rpx;
        height: 170rpx;
        margin: auto;
        border-bottom: 1rpx solid rgba(153, 153, 153, .15);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;

        .paiming_box {
            height: 170rpx;
            font-family: text1;
            font-weight: 800;
            font-size: 28rpx;
            line-height: 170rpx;
            color: #9A999A;
            font-style: italic;
            margin-right: 20rpx;



            &.paiming_box_1 {
                color: #FFB33A;
                background: linear-gradient(46deg, #FEC464 0%, #FEE7B3 50%, #FEC465 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            &.paiming_box_2 {
                color: #A9AEBE;
                background: linear-gradient(46deg, #EEF2F6 0%, #BFC7D2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            &.paiming_box_3 {
                color: #FB7547;
                background: linear-gradient(46deg, #F8701A 0%, #FEA264 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }


        }

        .avatar_sbox {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
            position: relative;
            margin-right: 20rpx;

            image {

                width: 110rpx;
                height: 110rpx;
                border-radius: 50%;
            }

            .avatartxk_box {
                width: 127rpx;
                height: 130rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: -2rpx;
                right: -2rpx;
				z-index: 3;
				
            }
        }

        .nicheng_box {
            width: 100rpx;
            height: 170rpx;
            box-sizing: border-box;
            padding-top: 50rpx;

            .one_top_box {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // height: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #FFFFFF;
                // line-height: 28rpx;
                margin-bottom: 23rpx;
            }

            .two_bot_box {
                width: 240rpx;
                height: 35rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 27rpx;
                color: #FFFFFF;
                line-height: 35rpx;
            }
        }

        .liushuiz_box {
            height: 25rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFEDD7;
            line-height: 39rpx;
            position: absolute;
            right: 4rpx;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
}
</style>